<HTML>
<HEAD>
<TITLE>Customizing Display of Headlines</TITLE>
<link rel="stylesheet" type="text/css" href="chrome://habarixenu/skin/about.css">
</HEAD>
<BODY BGCOLOR="#FFFFFF" MARGINWIDTH="0" MARGINHEIGHT="0" LEFTMARGIN="0" TOPMARGIN="0" TEXT="#000000">
<DIV ALIGN="left" CLASS="outerbox">
<TABLE BORDER=0 CELLSPACING=3 CELLPADDING=0>
<TR>
<TD align="left" valign="top">
<img src="chrome://habarixenu/skin/images/logo.gif" border="0" align="left">
</TD>
<TD align="left" valign="middle"><H3 class="title">Habari Xenu - Customizing the Display of Headlines</H3></TD>
</TR>
</TABLE>
<P>

You now have greater control over how headlines are displayed in the right
hand side through custom Cascading Style Sheets (CSS). You can now customize
the display of headlines and summaries to your needs. Some people prefer
using better or different fonts; some prefer different colors; some like
seeing two columns of headlines.<P>

<B>How to start using custom CSS?</B><BR>
To start using custom CSS, you must do the following:

<OL>
<LI>Enable user customization by checking the option <I>Enable customization
through userContent.css</I> under <I>Habari Xenu -&gt; Settings</I>.

<LI>Under your Mozilla or Firefox profile, you will find a special
directory named <I>chrome</I>. You customizations must be added to the file
<I>userContent.css</I> under this <I>chrome</I> folder. This file contains
user-level style-sheet customizations that have to be applied to all webpages
viewed through the browser.

<LI>The <A HREF="http://cdn.mozdev.org/chromedit/" TARGET="_blank">ChromEdit</A>
extension greatly simplifies editing your <I>userContent.css</I>. It is 
<B>strongly</B> recommended that you <A HREF="http://downloads.mozdev.org/cdn/chromedit/chromedit.xpi">install it</A>.
After installing it and restarting your browser, you can launch ChromeEdit
through <I>Tools -&gt; Edit User Files</I>.

<LI>Add your CSS customizations to the tab titled <I>userContent.css</I>
in ChromEdit. The following section provides some frequently asked for customization.
</OL>

<B>Frequently Asked for Customizations</B><BR>
You may need to restart the browser for some of the following to take effect<P>


<u>Display Headlines in Two Columns</u><br>
Add the following to <I>userContent.css</I>:

<blockquote style="border: 1px solid; border-color: #336699; background: #CCCCCC;">
<pre>
div.hx-item{
    width:45% !important;
    float: left !important;
}
</pre>
</blockquote>

<u>Increase the size of the 'Posted' credit line</u><br>
Add the following to <I>userContent.css</I>, changing 8pt to whatever works best for you:

<blockquote style="border: 1px solid; border-color: #336699; background: #CCCCCC;">
<pre>
div.hx-credit{
    font-size: 8pt !important;
}
</pre>
</blockquote>

<u>Changing the font of an entire news item (headline + summary)</u><BR>
Add the following to <I>userContent.css</I>, changing 'verdana' to whatever works best for you:

<blockquote style="border: 1px solid; border-color: #336699; background: #CCCCCC;">
<pre>
div.hx-item{
    font-family: verdana; 
}
</pre>
</blockquote>
<P>

<B>Some background into document classes used in Habari Xenu</B><BR>

There are several document classes in the headlines displayed by Habari Xenu.
You can style one or more of these classes to have maximum control over how
headlines and summaries are displayed. Remember that you must mark any
custom styles you add as '!important'.<P>

The display frame is divided into the following classes:<P>

<blockquote style="border: 1px solid; border-color: #336699; background: #CCCCCC;">
class=<i>hx-header</i>
<div style="width:96%; font-family: arial, helvetica, verdana, sans-serif; font-size: 8pt; border: solid; border-color: #AA1002; border-width: normal; background: #CCCCCC; margin-left: 3pt; margin-right: 3pt; margin-top: 3pt; margin-bottom: 5pt; padding: 2pt ;">
<b class='hx-header-title' id='hx-header-title'><a href='http://www.nytimes.com/pages/international/index.html?partner=rssnyt' target='_blank'>NYT >
International</a></b><br>
Find breaking news, world news, multimedia &amp; opinion on the US, Africa, Canada, Mexico, South & Central Americas, Asia, Europe, the Middle East and
Iraq. <br>
<p>

<b>Details</b>:<br><i>Feed URL</i>: <a href='http://www.nytimes.com/services/xml/rss/nyt/International.xml'
target='_blank'>http://www.nytimes.com/services/xml/rss/nyt/International.xml</a><br>
<i>Feed Type</i>: RSS<br>
<i>Feed Published At</i>:Sat, 20 Nov 2004 22:00:01 EST<br>
<i>Feed Parsed Copy</i>: <a href='file:///home/thaths/.mozilla/default/h3vuta92.slt/chrome/habarixenucache/83fb5ec097f5e17dcb92631dce4d3948.html'
target='_blank'>/home/thaths/.mozilla/default/h3vuta92.slt/chrome/habarixenucache/83fb5ec097f5e17dcb92631dce4d3948.html</a><br>
</div>

class=<i>hx-header-title</i>
<div style="width:96%; font-family: arial, helvetica, verdana, sans-serif; font-size: 8pt; border: solid; border-color: #AA1002; border-width: normal; background: #CCCCCC; margin-left: 3pt; margin-right: 3pt; margin-top: 3pt; margin-bottom: 5pt; padding: 2pt ;">
<b class='hx-header-title' id='hx-header-title'><a href='http://www.nytimes.com/pages/international/index.html?partner=rssnyt' target='_blank'>NYT >
International</a></b><br>
</div>

class=<i>hx-details</i>
<div style="width:96%; font-family: arial, helvetica, verdana, sans-serif; font-size: 8pt; border: solid; border-color: #AA1002; border-width: normal; background: #CCCCCC; margin-left: 3pt; margin-right: 3pt; margin-top: 3pt; margin-bottom: 5pt; padding: 2pt ;">
<b>Details</b>:<br><i>Feed URL</i>: <a href='http://www.nytimes.com/services/xml/rss/nyt/International.xml'
target='_blank'>http://www.nytimes.com/services/xml/rss/nyt/International.xml</a><br>
<i>Feed Type</i>: RSS<br>
<i>Feed Published At</i>:Sat, 20 Nov 2004 22:00:01 EST<br>
<i>Feed Parsed Copy</i>: <a href='file:///home/thaths/.mozilla/default/h3vuta92.slt/chrome/habarixenucache/83fb5ec097f5e17dcb92631dce4d3948.html'
target='_blank'>/home/thaths/.mozilla/default/h3vuta92.slt/chrome/habarixenucache/83fb5ec097f5e17dcb92631dce4d3948.html</a><br>
</div>

class=<I>hx-item</I>
<DIV STYLE="width:94%; font-family: arial, helvetica, verdana, sans-serif; font-size: 8pt; border: 1px dashed; border-color: #339966; background: #EEEEEE; margin-left: 8pt; margin-right: 3pt; margin-top: 3pt; margin-bottom: 5pt; padding: 3pt ;">
<b><a class='hx-headline' href='http://www.reuters.com/newsArticle.jhtml?type=oddlyEnoughNews&storyID=6868872&src=rss/oddlyEnoughNews'
target='_blank'>Are You Kidding Me?</a></b><br>
<div class='hx-summary'> BERLIN (Reuters) - Thieves have stolen scantily clad garden  gnomes from a gnome peepshow in an eastern German amusement
park, park manager Frank Ullrich said on Thursday.</div>
<br clear='all'>
<div class='hx-credit'>Posted at Fri, 19 Nov 2004 14:19:41 GMT </div>
</DIV>

class=<I>hx-headline</I>
<DIV STYLE="width:94%; font-family: arial, helvetica, verdana, sans-serif; font-size: 8pt; border: 1px dashed; border-color: #339966; background: #EEEEEE; margin-left: 8pt; margin-right: 3pt; margin-top: 3pt; margin-bottom: 5pt; padding: 3pt ;">
<b><a class='hx-headline' href='http://www.reuters.com/newsArticle.jhtml?type=oddlyEnoughNews&storyID=6868872&src=rss/oddlyEnoughNews'
target='_blank'>Are You Kidding Me?</a></b><br>
</DIV>

class=<I>hx-summary</I>
<DIV STYLE="width:94%; font-family: arial, helvetica, verdana, sans-serif; font-size: 8pt; border: 1px dashed; border-color: #339966; background: #EEEEEE; margin-left: 8pt; margin-right: 3pt; margin-top: 3pt; margin-bottom: 5pt; padding: 3pt ;">
<div class='hx-summary'> BERLIN (Reuters) - Thieves have stolen scantily clad garden  gnomes from a gnome peepshow in an eastern German amusement
park, park manager Frank Ullrich said on Thursday.</div>
</DIV>

class=<I>hx-credit</I>
<DIV STYLE="width:94%; font-family: arial, helvetica, verdana, sans-serif; font-size: 8pt; border: 1px dashed; border-color: #339966; background: #EEEEEE; margin-left: 8pt; margin-right: 3pt; margin-top: 3pt; margin-bottom: 5pt; padding: 3pt ;">
<div class='hx-credit'>Posted at Fri, 19 Nov 2004 14:19:41 GMT </div>
</DIV>
</blockquote>


<DIV ALIGN="CENTER" class="signature">
<a href="chrome://global/content/MPL-1.1.html">Copyright &copy; 2003-2004</a> <a href="http://openscroll.org/" target="_blank">Sudhakar "Thaths" Chandra</a><BR>
</DIV>
</BODY>
</HTML>
